<template>
	<div class="wrap">
		<h1 class="title">报修管理</h1>
		<!-- 搜索报修申请信息 -->
		<el-row :gutter="10" >
			<el-col :span="4">
				<el-form-item label="寝室号：">
					<el-input v-model.number="roomId" />
				</el-form-item>
			</el-col>
			<el-col :span="1">
				<el-button class="btn" @click="submitSearchRepairApply">查询</el-button>
			</el-col>
		</el-row>
		<div class="table">
			<el-table
				:data="repairInfo"
				:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
				:row-style="tableRowClassName">
				<el-table-column prop="repairPerson" label="报修人" />
				<el-table-column prop="repairId" label="报修ID" />
				<el-table-column prop="buildId" label="楼栋号" />
				<el-table-column prop="dorNumber" label="寝室号" />
				<el-table-column prop="repairContent" label="报修内容" />
				<el-table-column prop="phone" label="联系电话" />
				<el-table-column prop="repairStatus" label="报修申请状态" />
				<el-table-column prop="repairTime" label="申请时间" >
					<template #default="{row}">
					{{ new Date(row.repairTime).toLocaleDateString() }}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template #default="{ row }">
						<el-button v-if="row.repairStatus !='已解决'" link type="success" @click="handleAgree(row)">同意</el-button>
						<span v-else :style="{color:'pink'}"> 已处理</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog width="500" v-model="showAgreeDialog" title="同意报修申请">
			<div class="txt">
				确定批准 <span class="color">{{ target.repairPerson }}</span> 报修申请吗？
			</div>
			<template #footer>
				<el-button plain type="primary" @click="handleAgreeAgain">确认</el-button>
			</template>
		</el-dialog>

		<!-- 分页 -->
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getAllRepairInfo, planRepair,getRepairInfoByDorNum } from '@/utils/axios/domiRequests'
import { getRepairOneBuild } from '@/utils/axios/getTotal'
import { useUserStore } from '@/stores/userStore'
import { debounce } from '@/utils/tools'
import useRegStore from '@/stores/useReg'

const { userInfo } = useUserStore()
const {handleCheckDorNumber}=useRegStore()

const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = reactive([10, 20, 30])
const total = ref(0)

const roomId=ref()

const showAgreeDialog = ref(false)
// 换房信息
const repairInfo = ref([])

const target = ref()

const submitSearchRepairApply=async()=>{
	if(!handleCheckDorNumber(roomId.value)) return
	let {data}=await getRepairInfoByDorNum({pageSize:pageSize.value,currentPage:currentPage.value,dorNumber:roomId.value})
	repairInfo.value=data
	total.value=data.length
}

const handleAgreeAgain = debounce(async () => {
	await planRepair({ repairId: target.value.repairId })
	let { data } = await getAllRepairInfo({ currentPage: currentPage.value, pageSize: pageSize.value })
	repairInfo.value = data
	showAgreeDialog.value = false
})

// 处理同意
const handleAgree = (row) => {
	target.value = row
	showAgreeDialog.value = true
}

const handleSizeChange = async (val) => {
	let { data } = await getAllRepairInfo({ currentPage: currentPage.value, pageSize: val })
	repairInfo.value = data
}
const handleCurrentChange = async (val) => {
	let { data } = await getAllRepairInfo({ currentPage: val.value, pageSize: pageSize.value })
	repairInfo.value = data
}

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}

onMounted(async () => {
	let { data } = await getAllRepairInfo({ currentPage: currentPage.value, pageSize: pageSize.value })
	let res = await getRepairOneBuild({ buildId: userInfo.buildId })
	total.value = res.data
	repairInfo.value = data

})
</script>

<style scoped lang="scss">
.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}
.el-input{
	width: 100px;
}
.txt{
	text-indent: 2rem;
	font-size: 16px;
}
.color{
	color: rgb(0, 202, 237);
}
</style>
